<template>
  <!-- 直播回放 -->
  <view class="pages">
    <view class="title">直播预告</view>
    <view class="list">
      <view
        class="listItem1 u-flex"
        v-for="(item, index) in list4"
        :key="index"
        v-show="index == 0"
        @click="editLive(item)"
      >
        <view class="avatar">
          <image src="../../static/shop/f.png" mode="aspectFill"></image>
        </view>
        <view class="u-flex-1">
          <view class="u-flex">
            <view class="userName u-line-1">浮生满船清梦</view>
            <view class="yyNum u-m-l-5">20人预约</view>
          </view>
          <view class="name u-p-t-5">{{ item.name }}</view>
          <view class="time u-p-t-5">直播时间：5-18 15:52</view>
        </view>
        <view class="btnBox" v-show="!is_self">
          <view class="btn1">已预约</view>
        </view>
      </view>
    </view>
    <view class="review">
      <view class="review_title">历史回顾</view>
      <view class="list1 u-flex">
        <view
          class="listItem2"
          v-for="(item, index) in list4"
          :key="index"
          @click="navigateTo(`/socials/video/livePlayback?status=${item.status}`)"
        >
          <view class="thumb">
            <image src="../../static/index/img.png" mode="aspectFill"></image>
            <view class="viewsBox u-flex">
              <view class="tags">回放</view>
              <view>1000人观看</view>
            </view>
          </view>
          <view class="caption">
            <view class="u-line-1">{{ item.name }}</view>
            <view class="time u-p-t-10">2024-04-28 15:52</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
import { useMemberStore, useSystemStore } from '@/stores'
const list4 = ref([
  {
    name: '育儿经验',
    status: 1,
  },
  {
    name: '好物季狂欢盛典',
    status: 2,
  },
  {
    name: '交个朋友',
    status: 3,
  },
  {
    name: '女王甄选 I 予爱新生',
    status: 3,
  },
])
const is_self = ref(false)
onLoad((options) => {
  console.log('useMemberStore()', useMemberStore())

  if (options.uid == useMemberStore().userInfo.uid) {
    is_self.value = true
  } else {
    is_self.value = false
  }
})
</script>
<style scoped lang="scss">
page {
  background: #f6f6f6;
}
.pages {
  padding: 0 24rpx;
}
.title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 30rpx;
  color: #333333;
  padding: 20rpx 0 0rpx 0;
}
.list {
  .listItem1 {
    background: #ffffff;
    border-radius: 20rpx;
    padding: 20rpx;
    font-family: PingFangSC, PingFang SC;
    margin: 20rpx auto;
    width: 100%;
    box-sizing: border-box;
    .avatar {
      width: 100rpx;
      height: 100rpx;
      margin-right: 20rpx;

      image {
        width: 100rpx;
        height: 100rpx;
        display: block;
        border-radius: 50%;
      }
    }

    .btn {
      width: 180rpx;
      height: 56rpx;
      background: #00c1b9;
      border-radius: 28rpx;
      text-align: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #ffffff;
      line-height: 56rpx;
    }

    .btn1 {
      width: 130rpx;
      height: 56rpx;
      background: #00c1b9;
      border-radius: 28rpx;
      text-align: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #ffffff;
      line-height: 56rpx;
    }

    .btn2 {
      width: 130rpx;
      height: 56rpx;
      background: #f6f6f6;
      border-radius: 28rpx;
      text-align: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #999999;
      line-height: 56rpx;
    }

    .time {
      font-weight: 400;
      font-size: 26rpx;
      color: #aaaaaa;
    }

    .name {
      font-weight: 400;
      font-size: 26rpx;
      color: #5c5c5c;
    }

    .userName {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #202020;
      width: 165rpx;
    }

    .yyNum {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #aaaaaa;
      height: 38rpx;
      line-height: 38rpx;
      border-radius: 5rpx;
      border: 1rpx solid #aaaaaa;
      padding: 0 10rpx;
    }
  }
}
.listItem2 {
  width: 340rpx;
  height: 586rpx;
  background: #ffffff;
  border-radius: 16rpx;
  margin-top: 20rpx;

  .thumb {
    width: 340rpx;
    height: 460rpx;
    border-radius: 16rpx 16rpx 0 0;
    position: relative;

    image {
      width: 340rpx;
      height: 460rpx;
      border-radius: 16rpx 16rpx 0 0;
    }

    .viewsBox {
      position: absolute;
      top: 10rpx;
      left: 10rpx;
      height: 40rpx;
      background: rgba(51, 51, 51, 0.6);
      border-radius: 20rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #ffffff;

      align-items: center;
      padding-right: 20rpx;

      .tags {
        width: 68rpx;
        height: 40rpx;
        background: linear-gradient(270deg, #36ede6 0%, #03aba4 100%);
        border-radius: 20rpx;
        font-size: 24rpx;
        color: #ffffff;
        margin-right: 10rpx;
        text-align: center;
        line-height: 40rpx;
      }
    }
  }

  .caption {
    padding: 20rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;

    .time {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #999999;
    }
  }
}
.list1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>
